<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">

</head>
<body>
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/page/end/mainui.html">管理页面</a></span>
                </transition>
            </div>
            <el-menu :default-openeds="['1']" style="border: none;" background-color="black" text-color="#fff" active-text-color="#ffd04b"
                     default-active="createbus"
                     class="el-menu-vertical-demo" :collapse="isCollapse">
                <a href="/page/end/mainui.html">
                    <el-menu-item index="home">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                </a>
                <el-submenu index="1" v-if="user.permission && user.permission.length > 0">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">信息管理</span>
                    </template>
                    <a :href=`${item.path}` v-for="item in user.permission" :key="item.id">
                        <el-menu-item :index="item.flag">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </a>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i style="font-size: 22px; cursor: pointer"
                           :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleCollapse"></i>
                    </el-col>
                    <el-col :span="2" :offset="21" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.jobnum}}</span>
                        <el-dropdown>
                            <img src="/files/avatar"
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">
                                <a href="/page/end/person.html"
                                   style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>
                <div style="color: black; font-size: 20px; margin: 10px 0">业务定制</div>
<!--                <div style="color: cornflowerblue; font-size: 20px; margin: 10px 0" >请按照顺序排序</div>-->

                <div style="height: 1px; background-color: white"></div>
                <!--                <el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索" @keyup.enter.native="loadTable"></el-input>-->
                <!--                <el-button @click="add" type="primary" size="mini" style="margin: 10px 0">新增</el-button>-->
                <!--                <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button>-->


                <el-table
                        ref="multipleTable"
                        row-key="id"
                        :data="tableData"
                        @selection-change="handleSelectionChange"
                        border
                        style="width: 100%">
                    <el-table-column

                            type="selection"
                    >

                    </el-table-column>
                    <el-table-column
                            v-for="(item,index) in props"
                            :prop="item.prop"
                            :label="item.label"
                    >
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="负责医生"
                           >
                        <template scope="scope">
                            <el-select v-model="tableData[scope.$index].doctorid" placeholder="请选择">
                                <el-option v-for="item in doctor" :key="item" :label="item" :value="item">
                                    <span style="float: left">{{ item }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{item}}</span>
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>

                </el-table>

                <el-button type="primary" @click="sortprocess">下一步</el-button>
<!--                <pre style="text-align: left">-->
<!--                 {{tableData}}-->
<!--                </pre>-->
                <el-dialog title="详细业务信息" :visible.sync="dialogFormVisible" width="30%"
                           close-on-click-modal="false" close-on-press-escape="false" show-close="false">
                    <el-form >
                        <el-form-item label="业务名称" label-width="100px">
                            <el-input v-model="businessname" autocomplete="off" style="width: 80%"></el-input>
                        </el-form-item>
                        <el-form-item label="业务功能描述" label-width="100px">
                            <el-input v-model="businessdes" autocomplete="off" style="width: 80%"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="sortprocess">确 定</el-button>
                    </div>
                </el-dialog>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>
<script src="../../js/Sortable-1.10.2.js"></script>
<script src="../../js/vuedraggable.umd.js"></script>


<script type="text/javascript">

    Vue.component('Sortable', window.Sortable.name);
    //传入的数据的格式{
    //  "businessname":"businessname",
    //  "process":"1,2,3,4,5",
    //  "doctorid":"tom1,jerry1,tom2,jerry2,tom3",
    //  "startposition":"tom1",
    //  "description":"业务的描述"
    //
    //  }

    function user() {
        let urlBase = "/user/";
        new Vue({
            el: "#wrapper",
            data: {
                selectflag:0,
                user: {},
                businesssize:5,
                tabledata1:[],
                doctor:[],
                tableData: [],
                // pageNum: 1,
                // pageSize: 10,
                // total: 0,
                dialogFormVisible: false,
                businessname:"",
                businessdes:"",
                isCollapse: false,
                multipleSelection: [],
                options: [],
                goalmsg:{
                    bussnessname:"",
                    process:"",
                    doctorid:"",
                    startposition:"",
                    description:""

                },
                goal:[],
                props: [{"label":"流程编号","prop":"id"},{"label":"名称","prop":"bussnessname"},{"label":"描述","prop":"idnum"}]
            },
            created() {
                this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                this.loadTable();
            },
            mounted(){
                // this.rowDrop();

            },
            methods: {
                edit(obj) {
                    this.entity = obj;
                    this.dialogFormVisible = true;
                },
                rowDrop() {
                    const tbody = document.querySelector('.el-table__body-wrapper tbody')
                    // console.log(tbody);
                    const _this = this
                    Sortable.create(tbody, {

                        onEnd({ newIndex, oldIndex }) {

                            const currRow = _this.tableData.splice(oldIndex, 1)[0]
                            _this.tableData.splice(newIndex, 0, currRow)
                            // console.log(this.tableData);
                        }
                    })
                },
                handleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },

                reselect(){
                    this.dialogFormVisible = false
                },
                subbmit(){
                    $.ajax({
                        url:"/business/create",



                    })

                },
                sortprocess(){
                    if(this.selectflag == 0){
                        // this.tableData = this.multipleSelection;
                        for(var i = 0;i < this.multipleSelection.length;i++){
                            this.goal.push({
                                bussnessname:"",
                                id:"",
                                description: "",
                                doctorid:""

                            });
                            this.goal[i].bussnessname= this.multipleSelection[i].bussnessname;
                            this.goal[i].id= this.multipleSelection[i].id;
                            this.goal[i].description= this.multipleSelection[i].description;
                        }
                        this.tableData=this.goal;
                        console.log(this.tableData);
                        this.rowDrop();
                        // this.dialogFormVisible = true;
                        this.selectflag = 1;
                    }else if(this.selectflag == 2){
                        this.dialogFormVisible = false;
                        //传入的数据的格式{
                        //  "businessname":"businessname",
                        //  "process":"1,2,3,4,5",
                        //  "doctorid":"tom1,jerry1,tom2,jerry2,tom3",
                        //  "startposition":"tom1",
                        //  "description":"业务的描述"
                        //
                        //  }
                        console.log(this.tableData);
                        let goalprocess;
                        let goaldoctor;
                        for(var i = 0;i < this.tableData.length;i++){
                            if(i == 0){
                                goalprocess = this.tableData[i].id;
                                goaldoctor = this.tableData[i].doctorid;
                            }
                            else{
                                goalprocess = goalprocess+","+this.tableData[i].id;
                                goaldoctor = goaldoctor+","+this.tableData[i].doctorid;
                            }
                        }
                        let goaldata= {
                            "businessname":this.businessname,
                            "processid":goalprocess,
                            "doctorid":goaldoctor,
                            "startposition":this.tableData[0].doctorid,
                            "description":this.businessdes
                        };
                        console.log(goaldata);
                        $.ajax({
                            url: "/business/create",
                            type: "POST",
                            contentType: "application/json",
                            data: JSON.stringify(goaldata)
                        }).then(res =>{
                            this.$message(res.msg);
                            console.log(res);
                        })

                    }else if(this.selectflag == 1){
                        this.dialogFormVisible = true;
                        this.selectflag = 2;

                    }



                },
                print(){
                    console.log(this.multipleSelection);
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },



                logout() {
                    // 请求退出接口
                    $.get("/user/logout");
                    localStorage.removeItem("user");
                    location.href = "../../index.html";
                },
                loadTable() {
                    $.get("/process/getprocessall").then(res => {
                         console.log(res.data[0].bussnessname);
                        for(var i = 0;i < res.data.length;i++){
                            this.tableData.push({
                                bussnessname:"",
                                id:"",
                                description: "",
                                doctorid:""
                            });
                            this.tableData[i].bussnessname= res.data[i].bussnessname;
                            this.tableData[i].id= res.data[i].id;
                            // this.tableData1[i].description= res.data[i].description;
                        }

                        this.tableData1 = this.tableData;
                        console.log(this.tableData);
                        console.log(this.tableData1);
                    })
                    $.get("/user/doctor").then(res => {
                        this.doctor = res.data;
                    })
                    $.get("/role").then(res => {
                        this.options = res.data;
                    })
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },


                save() {
                    let type = this.entity.id ? "PUT" : "POST";
                    $.ajax({
                        url: urlBase,
                        type: type,
                        contentType: "application/json",
                        data: JSON.stringify(this.entity)
                    }).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                message: "保存成功",
                                type: "success"
                            });
                            this.loadTable();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                        this.dialogFormVisible = false;
                    })
                },


            }
        })

    }

    user();
</script>
</body>
</html>
